<template>
	<view class="box">
		<view class="header">
			<view class="modular">
				<view class="search">
					<image src="@/static/img/healthStatus/search@2x.png" mode=""></image>
					<input type="text" placeholder="姓名" v-model="healthStr" @blur="search()">
				</view>
			</view>
			<view class="tabSwitch">
				<view :class="healthRank == 1 ? 'on' : ''" @click="[healthRank = 1,list= [],getlist({pageSize:10,pageIndex:1,healthRank:1},nullData=false,page=1)]">健康管理师</view>
				<view :class="healthRank == 2 ? 'on' : ''" @click="[healthRank = 2,list= [],getlist({pageSize:10,pageIndex:1,healthRank:2},nullData=false,page=1)]">健康专家</view>
			</view>
		</view>
		
		<view class="mainContent">
			<view class="healthDetails" v-for="(item,index) in list" :key="index">
				<image :src="item.headPicture && item.headPicture || '../../static/img/default_tx.png'" class="headPortrait"></image>
				<view class="essentialInformation" @click="toDetails(item)">
					<view>{{item.realName}}</view>			
					<view>{{item.appellations || '未填写称谓'}}</view>
					<view>{{item.department || ''}}</view>
				</view>
				<image src="@/static/img/healthStatus/consult.png" class="consult"  @click="[toIM,toDetails(item)]"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				list:[],
				healthRank: 1,
				nullData:false,
				healthStr:''
			}
		},
		onLoad() {
			this.getlist({pageSize:10,pageIndex:1,healthRank:1})
		},
		methods:{
			getlist(data){
				this.$api.UserHealth(data).then((res)=>{
					this.list = res.data.result && res.data.result.list;
					if(this.list.length >= res.data.result.totalCount){
						this.nullData = true;
					}
				})
			},
			search() {
				this.getlist({healthStr:this.healthStr,healthRank:this.healthRank,pageIndex:1,pageSize:10})
			},
			toDetails(e) {
				uni.navigateTo({
					url:'/pages/healthTeam/personalPage?id='+e.id
				})
			},
			toIM() {
				// if(this.info.healthRank == 1){
				// 	if(this.info.status != 1){
				// 	 	uni.showToast({
				// 	 		title:'需关注健康管理师后才可咨询！',
				// 	 		icon:'none'
				// 	 	})
				// 	 	return;
				// 	}
				//  }else{
				// 	uni.showToast({
				// 	 	title:'请联系健康管理师！',
				// 	 	icon:'none'
				// 	})
				// 	return;
				//  }
				// const headPicture = this.info.headPicture || 'http://jlm-file.oss-cn-hangzhou.aliyuncs.com/jlm-product/image/sms/user/2020/11/5de3289f9e284f33a88d35d9b9bf8b8d.png'
				// uni.navigateTo({
				// 	url: encodeURI('/pages/imchat/chat?toUserId='+this.info.codeId+'&name='+this.info.realName+'&headPicture='+headPicture)
				// })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		background-color: #F8F8F8;
		width: 750upx;
		min-height: calc(100vh - 44px);
		.header {
			position: fixed;
			top: 88upx;
			left: 0;
			width: 750upx;
			height: 178upx;
			background: #05C6AD;
			z-index: 100;
			.modular {
				display: flex;
				align-items: center;
				width: 750upx;
				background: #05C6AD;
				.search {
					display: flex;
					align-items: center;
					width: 700upx;
					height: 54upx;
					background: #FFFFFF;
					border-radius: 27upx;
					margin:22upx auto;
					image {
						width: 22upx;
						height: 22upx;
						margin: 0 24upx;
					}
					input {
						font-size: 24upx;
						width: 100%;
						height: 100%;
					}
				}
			}
			.tabSwitch {
				display: flex;
				justify-content: space-around;
				align-items: center;
				view {
					color: #B6FFF6;
					font-size: 30upx;
				}
				.on {
					position: relative;
					color: #FFFFFF;
					font-size: 36upx;
				}
				.on::after {
					content: '';
					display: block;
					width: 94upx;
					height: 4upx;
					background: #FFFFFF;
					border-radius: 2upx;
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					margin-top: 13upx;
				}
			}
		}
		.mainContent {
			background-color: #F8F8F8;
			margin: 178upx auto 0;
			width: 702upx;
			padding-top: 24upx;
			.healthDetails {
				display: flex;
				width: 702upx;
				background: #FFFFFF;
				border-radius: 22upx;			
				padding: 34upx 42upx 42upx 23upx;
				box-sizing: border-box;
				margin-bottom: 24upx;
				.headPortrait {
					width: 100upx;
					height: 100upx;
					border-radius: 20upx;
					margin-top: 12upx;
				}
				.essentialInformation {
					width: 452upx;
					margin: 0 0 0 36upx;
					color: #666666;
					font-size: 28upx;
					view {
						margin-top: 4upx;
					}
					view:first-child {
						color: #000000;
						font-size: 36upx;
						font-weight: bold;
						margin-top: 0;
					}	
				}
				.consult {
					width: 50upx;
					height: 50upx;
				}
			}
		}
	}
</style>
